<nav class="tab-bar">
  <section class="left-small">
    <a ng-click="cancel()" class="p10">
      <span class="text-close" translate>Close</span>
    </a>
  </section>
  <section class="middle tab-bar-section">
    <h1 class="title ellipsis" style="color:#fff" translate>
      Bind payment
    </h1>
  </section>
</nav>


<div class="modal-content fix-modals-touch" style="padding: 15px;">
	<form name=bindForm>
	<div ng-if="error" class="row columns">
		<span class="has-error size-12">
			{{error}}
		</span>
	</div>

	<span translate>The peer receives this payment if </span>
	<span selectable="#binding_type" dropdown-toggle="#binding_type" data-model="binding" data-prop="type"></span>
        <ul id="binding_type" class="f-dropdown pos-at-cursor" data-dropdown-content>
		  <li class="dropup-item" data-value="reverse_payment">
			<a><span translate>I receive another payment of</span></a>
		  </li>
		  <div class="clear"></div>
		  <li class="dropup-item" data-value="data">
		  	<!-- <a><span translate>an event is posted by an oracle</span></a> -->
		  </li>
		</ul>


		<!--input  绑定支付条件-->
		<input
			ng-if="binding.type == 'reverse_payment'"
			type="number" min="0" ng-attr-placeholder="{{'amount'|translate}}"
			ng-minlength="0.00000001" ng-maxlength="10000000000"
			ng-model="binding.reverseAmount" name="reverseAmount"
			valid-amount="{{binding.reverseAsset}}"
			required autocomplete="off"
			style="text-align: right;border: none;border-bottom: 1px solid #eee" class="inline">

	<span ng-if="binding.type == 'reverse_payment'" selectable="#asset" dropdown-toggle="#asset" data-model="binding" data-prop="reverseAsset"></span><span ng-if="binding.type == 'reverse_payment'">.</span>
		<ul id="asset" class="f-dropdown pos-at-cursor" data-dropdown-content>
		  <li ng-repeat="info in arrPublicAssetInfos" class="dropup-item" data-value="{{info.asset}}">
			<a><span >{{info.displayName}}</span></a>
		  </li>
		</ul>

	<span ng-if="binding.type == 'data'" class="combobox-container">
		<input class="m0 inline" type="text" id="oracle_address" name="oracle_address" placeholder="TrustNote address of the oracle" ng-model="binding.oracle_address" valid-address required style="width: 280px;" selectable="#oracle_list" dropdown-toggle="#oracle_list" data-model="binding" data-prop="oracle_address" autocomplete="off" not-selected>
	</span>
	  <ul id="oracle_list" class="f-dropdown small" data-dropdown-content style="max-width: 280px;">
		<li ng-repeat="(address, oracle) in oracles" class="dropup-item" data-value="{{address}}">
			<a><b >{{oracle.name}}</b><br><span>{{address}}</span></a>
		  </li>
	  </ul>
	<br ng-if="binding.type == 'data'">
	<span ng-if="binding.type == 'data'" translate>on feed name</span>
	<input ng-if="binding.type == 'data'" class="m0 inline" type="text" valid-feed-name="{{binding.oracle_address}}" id="feed_name" name="feed_name" placeholder="e.g. bitcoin_merkle" ng-model="binding.feed_name" maxlength="64" required >
	<br ng-if="binding.type == 'data'">
	<span ng-if="binding.type == 'data'" translate>with expected value of</span>
	<input ng-if="binding.type == 'data'" class="m0 inline" type="text" id="feed_value" name="feed_value" placeholder="e.g. 1PC9aZC4hNX2rmmrt7uHTfYAS3hRbph4UN:0.1" valid-feed-value="{{binding.oracle_address}}" ng-model="binding.feed_value" maxlength="64" required style="width: 280px;"><br ng-if="binding.type == 'data'">
	<span ng-if="binding.type == 'data'" translate>posted</span>
	<span ng-if="binding.type == 'data'" selectable="#feed_type" dropdown-toggle="#feed_type" data-model="binding" data-prop="feed_type"></span><span ng-if="binding.type == 'data'">.</span>
		<ul id="feed_type" class="f-dropdown pos-at-cursor" data-dropdown-content>
		  <li class="dropup-item" data-value="explicit">
			<a><span translate>explicitly</span></a>
		  </li>
		  <div class="clear"></div>
		  <li class="dropup-item" data-value="merkle">
		  	<a><span translate>in merkle tree</span></a>
		  </li>
		  <div class="clear"></div>
		  <li class="dropup-item" data-value="either">
		  	<a><span translate>either way</span></a>
		  </li>
		</ul>
		
	<div class="clear"></div><br>
	<span translate>If the condition is not met, I can take this money back after</span>


		<!--input 输入限制时间-->
		<input type="number" min="0.1" required name="timeout" ng-model="binding.timeout" style="text-align: right; width: 50px;border: none;border-bottom: 1px solid #eee" class="inline">
	<span translate>hours</span>.

	<div class="m20t large-12 large-centered row columns">
		<div >
		</div>
		<div >
		</div>


		<!--点击绑定支付条件-->
		<button
			type="button" class="button black round expand"
			ng-disabled="!binding.timeout || (binding.type == 'reverse_payment' ? (!binding.reverseAmount || bindForm.reverseAmount.$invalid) : (!binding.oracle_address || bindForm.oracle_address.$invalid || !binding.feed_name || bindForm.feed_name.$invalid || !binding.feed_value || bindForm.feed_value.$invalid))"
			style="background: #0095ff;" ng-click="bind()" translate>
			Bind payment
		</button>
	</div>
	</div>

	</form>
</div>
